<template>
  <div class="box">
    <div class="head-fixed">
      <div class="head">
        <div class="head-div">

        </div>
      </div>
    </div>
    <!-- 注册之后跳转found页，填写简历 -->
    <div class="content">
      <div class="logo">
        <img src="../../assets/zjt2.png" alt="" class="back" @click="back()" />
        <img src="../../assets/bg.png" alt="" class="logo-bg"/>
      </div>


	  <!-- 注册用户-->
      <div class="content" v-show="act==2">
        <p>注册用户</p>
        <div class="head-title">
          <input type="text" v-model="accountName" placeholder="登录账号"  />
        </div>
        <div class="head-title">
          <input type="text" v-model="mobile" placeholder="请输入手机号"  />
        </div>
        <div class="head-title">
          <input type="password" v-model="password" placeholder="请输入密码(最少6位，数字或字母)" />
        </div>
        <div class="head-title">
          <input type="password" v-model="password2" placeholder="请确认密码(最少6位，数字或字母)" />
        </div>
        <div class="head-btn" @click="registerAccount">立即注册</div>
        <div class="bottom">
          <span @click="on(1)">快捷登录</span>
          <span>|</span>
          <span @click="on(0)">密码登录</span>
          <span>|</span>
          <span @click="on(3)">商家入驻</span>
        </div>
        <div class="bottom">
          <span >注册/登录即代表同意</span>
        </div>
      </div>


<!--用户注册页面下对于的快捷登录-->
	  <div class="content" v-show="act==1">
	    <p>快捷登录</p>
	    <div class="head-title">
	      <input type="text" v-model="loginPhone" placeholder="请输入手机号" />
	      <span @click="getCode()">获取验证码</span>
	    </div>
	    <div class="head-title">
	      <input type="text" v-model="loginPhoneCode" placeholder="请填写验证码" @blur="loginPhoneCodeBlur" />
	    </div>
	    <div class="head-btn" @click="phoneLogin()">登录</div>
	    <div class="bottom">
	      <span @click="on(0)">密码登录</span>
	      <span>|</span>
	      <span @click="on(2)">立即注册</span>
	    </div>
	  </div>

<!-- 引入该页面图片样式-->
    </div>
    <img src="../../assets/login.jpg" alt="" class="bg" />
    </div>
</template>

<script>
	import { Toast } from 'mint-ui';//引入mint-ui组件
export default { //默认导出， ？？
  inject: ["reload"],//？？
  name: "spread",//？？
  created() {
    console.log(this.act);
    // created 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
  },
  mounted() {
    // mounted在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
  },
  // data() 为变量赋值等
  data() {
    return {
      // status为用户身份，0是求职者，1是招聘者
      status: localStorage.status, //localStorage相当于本地储存
      act: 2,
      accountName: '',
      password: '',
      password2: '',
      accountNameCo: '',
      passwordCo: '',
      mobile: '',
      loginPhoneCode: '',
      loginPhone: '',
      loginAccountName: '',
      loginPassword: ''
    };
  },
  // methods 编写js函数
  methods: {
	  // accountNameBlur(){
		//   if( this.accountName === null || this.accountName === ''){
    //     //Toast提示框是一种非模态弹窗，它弹出一个小信息，作为提醒或消息反馈来用，一般用来显示操作结果，或者应用状态的改变。
    //     Toast("请输入用户名");
		//   }
	  // },
    // mobileBlur() {
    //   if (this.mobile === null || this.mobile === '' || this.mobile.length !== 11) {
    //     Toast("请输入手机号, 手机号长度必须为11位");
    //   }
    // },
    loginPhoneCodeBlur () {
      if (!this.loginPhoneCode) {
        Toast('请输入验证码')
      }
    },
    // passwordBlur() {
    //   // 添加密码规则验证
    //   const passwordRegex = /^[a-zA-Z\d]{6,}$/;
    //   if (!this.password || !passwordRegex.test(this.password)) {
    //     Toast("密码至少6位，且只能包含数字或字母");
    //   }
    // },
    // passwordBlur2() {
    //   if (!(this.password2)) {
    //     Toast("请输入确认密码");
    //   }
    // },
      //返回按钮
    back() {
      this.$router.go(-1); //返回上一层
    },
    on(n){
      if(n === 0){ //如果n为0，则去用户登录
          this.$router.push('/usersLogin')
          return;
      }
      if(n === 3){//如果n为3，则去公司注册
        this.$router.push('/companyRegister')
      }
      if(n === 1){//如果n为1，则还在用户注册页
        this.act=n; //??
      }
      if(n === 2){//如果n为2，是便捷登录页面里对应的立即注册
        this.act=n; //??
      }
      },
    //获取手机验证码
    getCode(){
      if(this.loginPhone === ""){
        Toast("请输入手机号");
        return
      }
      this.$http({
        method:"post",
        url: this.AppURL + '/user/sendCode',
        params: {
          mobile: this.loginPhone//让手机号等于后端传过来的mobile
        }
      })
      .then(({data}) => {
        //弹出后台返回信息
        Toast(data.result.msg);
      })
    },
    //手机验证码登录
    phoneLogin() {
      if (this.loginPhone === "") {
        Toast("请输入手机号");
        return
      }
      if (this.loginPhoneCode === "") {
        Toast("请输入手机验证码");
        return
      }
      this.$http({
        method: "post",
        url: this.AppURL + '/user/loginMobile',
        params: {
          mobile: this.loginPhone,
          code: this.loginPhoneCode
        }
      })
        .then(({data}) => {
          //登录成功
          if (data.result.code == 200) { //后台传来的200表示成功
            console.log("data.result====", data.result)
            localStorage.status = 1;//???
            //把userId存入localStorage中
            localStorage.setItem("userId", data.result.companyUser.id);//????
            console.log("获取userid====", localStorage.getItem("userId"));
            //登录成功后如果没有创建简历的话，跳转到创建简历页
            this.$router.push("/found");
          } else {
            //弹出信息，接收后端传来的result
            Toast(data.result.msg);
          }
        })
    },
    //注册个人账号
    registerAccount () {
      if (this.accountName === '' || this.accountName === null) {
        Toast('账号不能为空')
        return;
      }
      if (!this.mobile === '' || this.mobile === null || this.mobile.length !== 11) {
        Toast('请输入手机号，长度必须是11位')
        return
      }
      const passwordRegex = /^[a-zA-Z\d]{6,}$/;
      if (!this.password || !passwordRegex.test(this.password)) {
        Toast('密码至少6位，且只能包含数字或字母')
        return
      }
      if (!this.password2) {
        Toast('请输入确认密码')
        return
      }
      if (this.password !== this.password2) {
        Toast('密码不一致')
        return
      }
      this.$http({
        method: "post",
        url: this.AppURL + '/user/registerUser',
        params: {
          accountName: this.accountName,
          password: this.password,
          mobile:this.mobile
        },
      })
      .then(({data}) => {
        //弹出信息
        Toast(data.result.msg);
        //注册成功
        if(data.result.code==200){
          //跳转到登录页面
           this.$router.push("/usersLogin");
        }
      })
    },
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,
body,
.tac,
.box,
.tab-left,
.tab-left .el-menu {
  height: 100%;
}

.box {
  width: 100%;
  background: #3e63a8;
}
.head {
  background: #3e63a8;
  color: #fff;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}
.back {
  width: 14px;
  height: 14px;
}
.back {
  width: 20px;
  height: 20px;
  position: absolute;
  left: 10px;
  z-index: 999;
}
.logo {
  width: 100%;
  height: 200px;
  box-sizing: border-box;
  display: flex;
  position: relative;
  justify-content: center;
  padding-top: 20px;
}
.logo .logo-bg {
  /* width: 100%; */
  height: 150px;
}
.content {
  position: relative;
  z-index: 999;
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px;
  display: flex;
  flex-flow: column;
  align-items: center;
}
.content p {
  font-size: 14px;
  text-align: center;
  color: #fff;
  padding-top: 10px;
}
.head-title {
  flex: 1;
  width: 70%;
  box-sizing: border-box;
  padding: 0 10px;
  background: #fff;
  display: flex;
  align-items: center;
  height: 40px;
  margin: 10px 0;
}
.head-title span {
  font-size: 12px;
  padding-left: 10px;
}
.head-title input {
  border: 0;
  flex:1;
  outline: none;
  font-size: 12px;
}
::-webkit-input-placeholder {
  font-weight: 100;
} /* 使用webkit内核的浏览器 */
:-moz-placeholder {
  font-weight: 100;
} /* Firefox版本4-18 */
::-moz-placeholder {
  font-weight: 100;
} /* Firefox版本19+ */
:-ms-input-placeholder {
  font-weight: 100;
}
.head-btn {
  background: #f4cf4f;
  width: 70%;
  font-size: 14px;
  text-align: center;
  color: #3e63a8;
  height: 35px;
  line-height: 35px;
}
.bg {
  width: 100%;
  height: 100%;
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 0;
}
.con-box {
  width: 100%;
}
.bottom{
  color: #fff;
  font-size: 12px;
  display: flex;
  align-items: center;
  width: 70%;
  justify-content: space-around;
  padding-top: 20px;
}
</style>

